<template>
  <div class="app-container">
    <el-card>
      <span class="_before">线路信息</span>
      <div style="margin:40px 40px 0 40px">
        <el-row style="width:600px;min-width: 400px;">
          <el-col :span="11">
            <el-form-item>
              <div>出发地</div>
              <city-select ref="startCityRef" v-model="param.carStartCity" :needInfo="true" :cityList="startCityList"
                @cityId="startCityInfo" style="width: 100%;"></city-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center;margin-top: 40px; ">
            <svg-icon icon-class="toRight" />
          </el-col>
          <el-col :span="11">
            <el-form-item>
              <div>抵达地</div>
              <city-select ref="backCityRef" v-model="param.carBackCity" :needInfo="true" :cityList="backCityList"
                @cityId="backCityInfo" style="width: 100%;"></city-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card style="margin-top: 15px;">
      <span class="_before">车源信息</span>

      <div style="margin:40px 40px 0 40px">
        <el-form>
          <el-form-item>
            <div>车牌号</div>
            <div style="width:100%; ">
              <el-input v-model="param.plateNumber" placeholder="请输入" style="width: 400px"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div>车型</div>
            <div style="width:100%; ">
              <el-select v-model="param.vehicleModel" style="width:400px" placeholder="选择箱型">
                <el-option v-for="item in param.vehicleModelOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <div>车长</div>
            <div style="width:100%; ">
              <el-select v-model="param.vehicleLength" style="width:400px" placeholder="选择箱况">
                <el-option v-for="item in param.carLengthOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <div>载重</div>
            <div style="width:100%; ">
              <el-select v-model="param.loadWeight" style="width:400px" placeholder="选择箱况">
                <el-option v-for="item in param.loadWeightOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <div>排放标准</div>
            <div style="width:100%; ">
              <el-select v-model="param.emissionStandard" style="width:400px" placeholder="选择箱况">
                <el-option v-for="item in param.emissionStandardOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <div>运价</div>
            <div style="width:100%; ">
              <el-input v-model="param.freightPrice" placeholder="请输入" style="width: 400px"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div>联系人</div>
            <div style="width:100%; ">
              <el-input v-model="param.contacts" placeholder="请输入" style="width: 400px"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div>联系电话</div>
            <div style="width:100%; ">
              <el-input v-model="param.tel" placeholder="请输入" style="width: 400px"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div>备注</div>
            <div style="width:100%; ">
              <el-input v-model="param.textVal" type="textarea" rows="5" show-word-limit maxlength="200"
                style="width: 100%;" />
            </div>
          </el-form-item>
        </el-form>
      </div>

    </el-card>

    <el-card class="form_card" style="margin-top: 15px;">
      <span class="_before">图文描述</span>
      <div style="margin:40px 40px 0 40px">
        <el-form-item>
          <div>主图</div>
          <div style="width:100%">
            <div class="div-box-dark">
              <upload-Img ref="uploadImgRef" :urlList="param.showMainImgList" style="width:1000px;height: 1000px;" />
              <p>请上传1:1主图，主图大小不能超过3M，建议图片像素高于700*700px</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div>详情描述</div>
          <div style="width:100%">
            <div style="min-height:100px;width: 600px;">
              <div v-for="(mark, index) in param.marks" :key="index">
                <el-button v-if="index > 0" :icon="CloseBold" type="info" circle @click="handleClose(index)"
                  style="float: right;width:10px;height:10px"></el-button>
                <div class="div-box-dark">
                  <el-input v-model="mark.textVal" placeholder="在这里介绍您的集装箱" type="textarea" rows="5" show-word-limit
                    maxlength="200" style="width: 100%;" />
                  <upload-Img :ref="(el) => handleSetInputMap(el, index)" :urlList="mark.imgInfo"
                    style="width:1000px;height: 1000px; " />
                </div>
              </div>
              <el-button :icon="Plus" type="info" size="small" @click="handleAdd">新增描述</el-button>

            </div>
          </div>
        </el-form-item>
      </div>
    </el-card>

    <el-form-item>
      <div style="height: 100px;width: 100%;"></div>
      <div style="margin:auto;">
        <el-button @click="onSave('save')">保存待发布</el-button>
        <el-button type="warning" @click="onSave('putWarehouse')">放入车库</el-button>
        <el-button type="primary" @click="onSave('publish')">立即发布</el-button>
      </div>
    </el-form-item>

  </div>
</template>
<script setup lang="ts">
import citySelect from '@/components/citySelect'
import uploadImg from '@/components/upload/img.vue'
import { onActivated, onMounted, reactive ,ref} from 'vue';
import { CloseBold } from '@element-plus/icons-vue'
import { getCarInfo, submitSave, submitPublish, inWarehouse } from '@/api/carList'
import orderInfo from '@/store/modules/order'
import { useRouter } from 'vue-router';
const router = useRouter()

const param = reactive({
  carStartCity: '',
  carBackCity: '',
  plateNumber:'',
  vehicleModel:'',
  vehicleLength:'',
  loadWeight:'',
  emissionStandard:'',
  freightPrice:'',
  contacts:'',
  tel:'',
  textVal:'',
  modeList: [
    { value: 5, label: '立即上架' },
    { value: 10, label: '放入仓库' },
  ],
  vehicleModelOptions: [ // 5 - 标准 10 - 高板 15 - 平板 20 - 半挂车
    { value: 5, label: '标准' },
    { value: 10, label: '高板' },
    { value: 15, label: '平板' },
    { value: 20, label: '半挂车' },
  ],
  carLengthOptions: [ //5 - (6 - 8米) 10 - (9 - 10米) 15 - (11 - 12米) 20 - (13 - 15米) 25 - (16 - 17.5米)
    { value: 5, label: '6 - 8米' },
    { value: 10, label: '9 - 10米' },
    { value: 15, label: '11 - 12米' },
    { value: 20, label: '13 - 15米' },
    { value: 25, label: '16 - 17.5米' },
  ],
  loadWeightOptions: [ // 5 - (3 - 5吨) 10 - (6 - 10吨) 15 - (11 - 15吨) 20 - (16 - 20吨) 25 - (21 - 25吨) 30 - (26 - 30吨) 35 - (31 - 35吨)
    { value: 5, label: '3 - 5吨' },
    { value: 10, label: '6 - 10吨' },
    { value: 15, label: '11 - 15吨' },
    { value: 20, label: '16 - 20吨' },
    { value: 25, label: '21 - 25吨' },
    { value: 30, label: '26 - 30吨' },
    { value: 35, label: '31 - 35吨' },
  ], //5-国IV 10-国V 15-国VI
  emissionStandardOptions: [
    { value: 5, label: '国IV' },
    { value: 10, label: '国V' },
    { value: 15, label: '国VI' },
  ],
  marks: [{ textVal: '' }],

})

const startCityList = ref(null)
const backCityList = ref(null)
onActivated(() => {
  console.log('orderInfo().rowData')
  // console.log(orderInfo().rowData)
  const val = orderInfo().rowData
  //城市展示
  startCityList.value = [{ value: val.departureCityId, label: val.departureCityName, countryId: val.departureCountryId, countryCName: val.departureCountryName }]
  backCityList.value = [{ value: val.destinationCityId, label: val.destinationCityName, countryId: val.destinationCountryId, countryCName: val.destinationCountryName }]
  param.carStartCity = val.departureCityId
  param.carBackCity = val.destinationCityId
  param.plateNumber = val.plateNumber

  param.vehicleModel = val.vehicleModel
  param.vehicleLength = val.vehicleLength
  param.loadWeight = val.loadWeight
  param.emissionStandard = val.emissionStandard

  param.freightPrice = val.freightPrice
  param.contacts = val.contacts
  param.tel = val.tel
  param.textVal = val.textVal
  if (val.mainFileList) {
    param.showMainImgList = JSON.parse(val.mainFileList)
  }
  // param.tel = val.tel

  //编辑保存的入参
  param.carStartCityData = {
    id: val.departureCityId,
    cityCName: val.departureCityName,
    countryId: val.departureCountryId,
    countryCName: val.departureCountryName,
  }
  param.carBackCityData = {
    id: val.destinationCityId,
    cityCName: val.destinationCityName,
    countryId: val.destinationCountryId,
    countryCName: val.destinationCountryName,
  }
})

// 获取城市
const startCityInfo = (id: any, data: any) => {
  // console.log(id)
  console.log(data)
  param.carStartCity = id
  param.carStartCityData = data
}
const backCityInfo = (id: any, data: any) => {
  param.carBackCity = id
  param.carBackCityData = data
}

const handleClose = (val: any) => {
  // console.log(val)
  param.marks.splice(val, 1)
}
const handleAdd = (val: any) => {
  // console.log(val)
  param.marks.push({ textVal: '' })
}

const uploadImgRef = ref()
const uploadRef = {}
const handleSetInputMap = (el, index: number) => {
  if (el) {
    uploadRef[`imgRef${index}`] = el;
  }
};
const onSave = async (opr: any) => {
  // let imgList = await uploadImgRef.value.submitUpload()
  let imgList = await uploadImgRef.value.uploadFiles
  let mainImg = param.showMainImgList
  if (mainImg) { // 新主图和原主图 list合并
    mainImg.forEach((item: any) => {
      imgList.push(item)
    })
  }

  let imgListInfo = []
  // param.marks [{textVal: '我是备注132', imgInfo: [{name:'',url:''}]}]
  for (let i = 0; i < param.marks.length; i++) { // 循环遍历  注意 forEach使用 会数据丢失
    let el = param.marks[i]
    // let imgs = await uploadRef[`imgRef${i}`].submitUpload()
    let imgs = await uploadRef[`imgRef${i}`].uploadFiles
    if (el.imgInfo) { // 新副图和原副图 list合并
      el.imgInfo.forEach((item: any) => {
        imgs.push(item)
      })
    }
    imgListInfo.push({ textVal: el.textVal, imgInfo: imgs })
  }

  // console.log(imgList)
  // console.log(imgListInfo)
  // return
  // const filter = { 'fit': 15, 'nextNew': 10, 'allNew': 5, 'mix': 20 }
  // const filterSize = { '40HQ': 5, '40GP': 10, '20HQ': 15, '20GP': 20 } //5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
  const carry = param.carStartCityData
  const back = param.carBackCityData
  let template = {
    "departureCityId": carry.id,
    "departureCityName": carry.cityCName,
    "departureCountryId": carry.countryId,
    "departureCountryName": carry.countryCName,

    "destinationCityId": back.id,
    "destinationCityName": back.cityCName,
    "destinationCountryId": back.countryId,
    "destinationCountryName": back.countryCName,

    "plateNumber": param.plateNumber,
    "vehicleModel": param.vehicleModel,
    "vehicleLength": param.vehicleLength,
    "loadWeight": param.loadWeight,
    "emissionStandard": param.emissionStandard,
    "freightPrice": param.freightPrice,
    "contacts": param.contacts,
    "tel": param.tel,
    "remark": param.textVal,
    "boxEastYardId": 4,
    "mainFileList": JSON.stringify(imgList),
    "detailFileList": JSON.stringify(imgListInfo),
  }

  if (opr == 'save') { //保存待发布
    submitSave(template).then((res: any) => {
      router.push('carManage')
    })
  }
  if (opr == 'putWarehouse') { //放入车库
    inWarehouse(template).then((res: any) => {
      // router.back()
      router.replace('carManage')
    })
  }

  if (opr == 'publish') { // 立即发布
    submitPublish(template).then((res: any) => {
      router.push('carManage')
      // router.back()
    })
  }
}

</script>
<style lang="scss" scoped></style>
